$red: #e1251b;
$bg: #f5f5f5;
$grey: #999;
$text: #666;

$sm: 12px;
$base: 14px;
$lg: 16px;

a{
    color: $text;
    &:hover {
        color: $red;
    }
}

span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:focus {
        outline: none;
    }
}
input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
    -webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
@mixin FLEX($space: space-between,$align:center,$direction:row) {
    display: flex;
    justify-content: $space;
    align-items: $align;
    flex-direction: $direction;
}
@mixin ellipsis($line:2){
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: $line;
	line-clamp: $line;
	-webkit-box-orient: vertical;
}

@for $i from 1 through 5 {
    .mt#{$i}0 { margin-top: 10px * $i; }
    .mb#{$i}0 { margin-bottom: 10px * $i; }
    .ml#{$i}0 { margin-left: 10px * $i; }
    .mr#{$i}0 { margin-right: 10px * $i; }
    .pt#{$i}0 { padding-top: 10px * $i; }
    .pb#{$i}0 { padding-bottom: 10px * $i; }
    .pl#{$i}0 { padding-right: 10px * $i; }
    .pr#{$i}0 { padding-left: 10px * $i; }
  }

.center{
    @include FLEX(center);
    @include ellipsis;
}

